<template>
  <a-form-desc v-model="form" :formOption="formOption">
    <template #phoneForm>
      {{'18888888888'}}
    </template>
  </a-form-desc>
</template>

<script lang="ts" setup>
import aFormDesc from "@/components/aFormDesc";
const form = ref({
  name: "Tom",
  age: "10",
  phone: "158529232534",
  sex: "男",
  address:
    "No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu ProvinceNo.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu ProvinceNo.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu ProvinceNo.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu ProvinceNo.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu ProvinceNo.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province",
});

const formOption = computed(() => {
  return {
    border: true,
    closeBtn: false, // 关闭按钮
    closeBtnText: '取消',
    descMenuPosition: "right",
    space: true, // 为true去除左右padding
    descLabelWidth: 100, // label的宽度
    descLabelAlign: "center", // label的位置
    descLabelWidthSpan: 8, // 组件单个宽度 不传默认12
    // card: true,
    columns: [
      {
        prop: "name",
        label: "姓名",
      },
      {
        prop: "age",
        label: "年龄",
      },
      {
        prop: "phone",
        label: "手机号",
        lineClamp: 1,
        formSlot: true,
      },
      {
        prop: "sex",
        label: "性别",
        // descAlign: 'center',
      },
      {
        prop: "address",
        label: "地址",
        lineClamp: 2, // 溢出隐藏...
        descAlign: 'center', // 每个value的位置
        row: true, // 是否一行展示
      },
    ],
  };
});
</script>

<style>
</style>